<template>
  <div id = "app">
    <div class = "side-container">
      <Side />
    </div>
    <div class="content-container">
      <router-view></router-view>
    </div>
  </div>
</template>

<script>
import Side from './components/side/MenuSide.vue'

export default {
  name: 'App',
  components: {
    Side
  }
}
</script>

<style>
/* 添加全局样式，清除浏览器默认样式 */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html,
body {
  height: 100%; /* 保证根元素高度占满浏览器视口 */
}


#app {
  display: flex; /* 使用 Flexbox 布局 */
  height: 100vh; /* 让 #app 高度占满视口 */
  /* font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px; */
}

.side-container {
  flex: 1; /* 占据左侧 1/5 的空间 */
  border-right: 1px solid #ccc; /* 添加右侧边框以区分两侧容器（可选） */
}

.content-container {
  flex: 4; /* 占据右侧 4/5 的空间 */
}

</style>


